<template>
  <div>
    <div slot="com_header"><bread></bread></div>
    <div slot="com_con">
      <!-- 修改分类 -->
      <el-dialog title="分类名称" :visible.sync="dialogUpd">
        <el-form :model="addForm">
          <el-form-item label="分类名称" label-width="240px">
            <el-input v-model="addForm.cat_name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogUpd = false">取 消</el-button>
          <el-button type="primary" @click="upd()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 添加分类 -->
      <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
        <el-form :model="addForm">
          <el-form-item label="活动名称" label-width="240px">
            <el-input v-model="addForm.cat_name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="活动区域" label-width="240px">
            <el-cascader
              v-model="typeId"
              :options="typeOptions"
              :props="{
                expandTrigger: 'hover',
                label: 'cat_name',
                value: 'cat_id',
              }"
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
        </div>
      </el-dialog>
      <el-row>
        <el-col :span="2">
          <el-button type="primary" @click="dialogFormVisible = true"
            >添加分类</el-button
          >
        </el-col>
      </el-row>
      <tree-table
        class="tb-cate"
        index-text="#"
        show-index
        stripe
        border
        :data="tableList"
        :columns="columns"
        :expand-type="false"
        :selection-type="false"
      >
        <template slot="isok" slot-scope="scope">
          <i
            class="el-icon-success"
            v-if="!scope.row.delete"
            style="color: lightGreen"
          ></i>
          <i class="el-icon-error" v-else style="color: red"></i>
        </template>

        <template slot="level" scope="scope">
          <el-tag
            type="primary"
            effect="plain"
            size="mini"
            v-if="scope.row.cat_level === 0"
            >一级</el-tag
          >
          <el-tag
            type="success"
            effect="plain"
            size="mini"
            v-else-if="scope.row.cat_level === 1"
            >二级</el-tag
          >
          <el-tag type="warning" effect="plain" size="mini" v-else>三级</el-tag>
        </template>

        <template slot="level" scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="openUpd(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="del(scope.row)"
            >删除</el-button
          >
        </template>
      </tree-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="tableInfo.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="tableInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import bread from "../../components/bread";
export default {
  components: {
    bread,
  },
  data() {
    return {
      typeId: 0,
      dialogFormVisible: false,
      dialogUpd: false,
      tableList: [], //数据源
      columns: [
        { label: "分类名称", prop: "cat_name" },
        {
          label: "是否有效",
          prop: "effective",
          type: "template",
          template: "isok",
        },
        {
          label: "分类等级",
          prop: "cat_level",
          type: "template",
          template: "level",
        },
        {
          label: "操作",
          type: "template",
          template: "opt",
        },
      ],

      props: {
        expandType: false,
        selectionType: false,
      },
      tableInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5,
      },
      total: 0,

      //添加form
      addForm: {
        cat_pid: "",
        cat_name: "",
        cat_level: "",
      },
      //
      typeOptions: [],

      //修改传的ID
      updId:0,
    };
  },
  mounted() {
    this.query();
    this.queryType();
  },
  methods: {
    async query() {
      let rst = await this.$http.get("categories", this.tableInfo);
      this.tableList = rst.data.result;
      this.total = rst.data.total;
      console.log(this.tableList);
    },

    //分页
    handleSizeChange(val) {
      this.tableInfo.pagesize = val;
      this.query();
    },
    handleCurrentChange(val) {
      this.tableInfo.pagenum = val;
      this.query();
    },

    //删除
    async del(row) {
      let rst = await this.$http.delete(`categories/${row.cat_id}`);
      if (rst.meta.status == 200) {
        this.$message.success(rst.meta.msg);
        this.query();
      }
    },

    // 添加分类
    async add() {
      let rst = await this.$http.post("/categories", this.addForm);
      if (rst.meta.status == 201) {
        this.$message.success(rst.meta.msg);
        this.dialogFormVisible = false;
        this.query();
        this.addForm={}
      }
    },

    //下拉级联框
    handleChange() {
      if (this.typeId.length > 0) {
        this.addForm.cat_pid = this.typeId[this.typeId.length - 1];
        this.addForm.cat_level = this.typeId.length;
      } else {
        //当数组长度为0时则父级id为0,分类级别为0
        this.saveobj.cat_pid = 0;
        this.saveobj.cat_level = 0;
      }
    },

    // 获取所有商品分类
    async queryType() {
      let rst = await this.$http.get("categories", { type: 2 });
      let { data, meta } = rst;
      this.typeOptions = data;
      console.log(rst);
    },

    //修改
    async openUpd(row) {
      let rst = await this.$http.get(`categories/${row.cat_id}`);
      this.addForm.cat_name=rst.data.cat_name
      this.updId=row.cat_id
      this.dialogUpd = true;

    },

    async upd(){
      let rst = await this.$http.put(`categories/${this.updId}`,{cat_name:this.addForm.cat_name});
      if(rst.meta.status==200){
        this.$message.success(rst.meta.msg);
        this.query()
        this.dialogUpd=false;
        this.addForm={}
      }
    }
  },
};
</script>

<style lang="less" scoped>
</style>